/*
 * 注册页面
 * @Author: zfx
 * @Date: 2018-09-18 14:30:23
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.v-admin-forgot-password {
  .forgot-content {
    width: 500px;
    height: 600px;
    margin: 0;
    box-shadow: 0px 0px 10px 1px #cecece;
    display: flex;
    justify-content: center;
    border-radius: 0;
    .forgot-box {
      background: #fff;
      position: relative;
      width: 500px;
      height: 600px;
      padding: 20px 50px;
      border-radius: 10px;
      .forgot-header {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 15px;
        span {
          height: 1px;
          width: 107px;
          background: #2d8cf0;
        }
        h1 {
          line-height: 100px;
          text-align: center;
          letter-spacing: 3px;
          font-size: 24px;
          color: #2d8cf0;
        }
      }
      /*重新登录*/
      .go-login {
        font-size: 14px;
        color: #999999;
        text-align: right;
        padding-right: 12px;
        span {
          color: #2d8df0;
          cursor: pointer;
        }
      }
      /*重新登录 END*/
      /*邮箱*/
      .form-email {
       		padding: 0 40px;
			margin: 30px 0;
        span {
          color: #b3d8ff;
         	font-size: 12px;
		  margin-left: 5px;
        }
        /*input输入框样式*/
        input {
       		display: block;
			border: none;
		   border-bottom: 1px solid #E5E5E5;
		   width: 100%;
			outline: none;
			font-size: 14px;
			color: #333;
        }
        p {
          padding: 15px 0;
          color: #999999;
        }
      }
      /*邮箱 END*/
      /*邮箱申请成功*/
      .apply-successful,
      .resetPass-successful {
        text-align: center;
        padding: 0 30px;
        height: 230px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
        }
        p {
          font-size: 14px;
          color: #666;
        }
        div {
          font-size: 14px;
          color: #999;
        }
      }
      /*邮箱申请成功 END*/
      /*重新发送*/
      .to-resend {
        font-size: 14px;
        color: #999999;
        text-align: center;
        padding: 15px 0;
        span {
          color: #2d8df0;
          cursor: pointer;
        }
      }
      /*重新发送 END*/
      /*表单按钮样式*/
      .form-button {
        text-align: center;
        .ivu-btn-primary {
          height: 45px;
          width: 350px;
          border-radius: 25px;
          font-size: 16px;
          color: #fff;
          margin-top: 25px;
          box-shadow: 0 9px 30px rgba(45, 140, 240, 0.5);
        }
      }
        .login-boxTitle{
          font-size: 26px;
          color:cornflowerblue;
          text-align: center;
      }
      	.form-input {
				padding: 0 40px;
				margin: 30px 0;
				span {

					font-size: 12px;
					margin-left: 5px;
				}
				/*input输入框样式*/
				input {
					display: block;
					border: none;
					border-bottom: 1px solid #E5E5E5;
					width: 100%;
					outline: none;
					font-size: 14px;
					color: #333;
				}
			}
      .verification-code{
          width: 160px !important;
          float: left;

      }
      .verification-code-button{
          margin-left: 50px;
           color:cornflowerblue;
          float: left;
          border-color:cornflowerblue;
                 &:hover {
                    opacity: 0.8;
                }
      }
    }

  }
  .login-load {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .footer-logo {
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 30px;
    font-size: 0;
    text-align: center;
    img {
      height: 100%;
    }
  }
  .language {
    position: absolute;
    right: 40px;
  }
}
   .forgot-box:afer{
         content: '';
         display: block;
         clear: both;
    }
</style>
<template>
	<div class="v-admin-forgot-password">
		<div class="forgot-content _fun-hide">
			<div class="forgot-box">
				<div class="login-boxTitle">欢迎使用FaceCloud用户控制台</div>
				<div class="forgot-header">
					<span />
					<h1 class="login__title">手机注册</h1>
					<span />
				</div>


				<Form
					ref="formData"
					:model="form_data"
					:rules="ruleInline"
					name="login__form"
				>

					<Form-item
						class="form-input"
						prop="name"
					>
						<Input
							v-model="form_data.name"
							placeholder="请输入用户名"
							type="text"
							style="width:300px;"
							name="username"
						>
                       </Input>
					</Form-item>


					<Form-item
						prop="phone"
						class="form-input"
					>

						<i-input
							v-model="form_data.phone"
							placeholder="请输入手机号码"
							name="panx-user"
							style="width:300px;"
						>
							<Select
								slot="prepend"
								v-model="form_data.area_code"
								style="width:70px"
								name="create-area"
							>
								<Option
									v-for="item in area_code_list"
									:value="item.dial_code"
									:key="item.code"
								>
									+{{ item.dial_code }}
								</Option>
							</Select>


						</i-input>


					</Form-item>
					<Form-item
						prop="verify_code"
						class="form-input">

						<Input
							v-model="form_data.verify_code"
							placeholder="请输入验证码"
							type="text"
							name="panx-verify_code"
							style="width:300px;"
							@keydown.enter="handleSubmit('formData')">
						<Button
							v-if="!is_registeredCode"
							slot="append"
							type="primary"
							@click="registeredPhonecode()"
						>获取手机验证码</Button>
						<Button
							v-else
							slot="append"
							type="primary"
							loading
						>{{ countdownTime }}秒后可再次发送</Button>
								</Input>
					</Form-item>
					<Form-item
						class="form-button">
						<Button
							type="primary"
							long
							@click="handleSubmit('formData')">
							注册
						</Button>
					</Form-item>

					<div class="go-login">
						已有账号
						<span @click="goLogin">立即登录</span>
					</div>
			</Form></div>
		</div>
	</div>
</template>
<script type="text/babel">
import qs from 'qs';

export default {
	props: {
		area_code_list: {
			type: Array,
			default() {
				return [];
			},
		},

	},

	data() {
		const validatePhone = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('手机号码不能为空!'));
			}
			if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))) {
				callback(new Error('请输入正确的手机号码'));
			} else {
				callback();
			}
		};

		const validateVerify_code = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('验证码不能为空!'));
			}
			if (!(/^\d{1,}$/.test(value))) {
				callback(new Error('验证码只能为纯数字'));
			}
			if (value.length !== 6) {
				callback(new Error('验证码的数字为六位'));
			} else {
				callback();
			}
		};
		return {

			countdownTime: 3,

			is_registeredCode: false,

			form_data: {
				name: '',
				phone: null, // 手机号码
				verify_code: '',
				area_code: '86',
			},

			ruleInline: { // 表单验证规则
				phone: [
					{
					    validator: validatePhone,
						required: true,
						trigger: 'blur,change',
					},
				],
				name: [
					{
						required: true,
						message: '用户名是必须的',
						trigger: 'blur,change',
					},
					 {
						type: 'string', max: 12, message: '用户名过长!', trigger: 'blur',
					},
				],
				verify_code: [
					{
						validator: validateVerify_code,
						required: true,
						trigger: 'blur,change',
					},
				],

			},
		};
	},
	methods: {
		/**
     * 提交表单的方法
     * @return {undefined} {description}
     */
		handleSubmit(name) {
           		this.$refs[name].validate((valid) => {
				if (valid) {
					this.login_loading = true;
					this.toRegister(name);
				} else {
					this.$Message.error('你输入的信息有误');
				}
			});
		},

		// 触发定时器
		registeredTimer() {
          	this.is_registeredCode = true;
			const registeredT = setInterval(() => {
				this.countdownTime -= 1;
				if (Number(this.countdownTime) == 0) {
					clearInterval(registeredT);
					this.countdownTime = 3;
					this.is_registeredCode = false;
				}
			}, 1000);
		},

		// 获取注册的验证码
		registeredPhonecode() {
			if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form_data.phone)) {
				this.registeredTimer();

				const param = {
					 area_code: this.form_data.area_code,
					phone: this.form_data.phone,
				};
				this.axios.post(`${window.location.origin}/admin/api/v1/verifycode/register`, qs.stringify(param))

					.then(({ data }) => {
						if (Number(data.code) !== 200) throw new Error(data.error);

						console.log(data);

			        this.$Message.success('验证码已发送至你手机！');
					})
					.catch((err) => {
						this.$Message.error(err.message || err.statusText);
					});
				 } else if (!this.form_data.phone) {
					 this.$Message.error('请先输入手机号！');
				 } else {
					 this.$Message.error('请输入正确的手机号码！');
				 }
		},

		// 注册
		toRegister(param) {
			this.axios.post(`${window.location.origin}/admin/api/v1/customer/register`, qs.stringify(this.form_data))
				.then(({ data }) => {
					if (data.code === 200) {
						this.$Message.success('注册成功!!!已为你自动登录!!!');
						sessionStorage.setItem('name', data.user.name);
						sessionStorage.setItem('token', data.token);

						this.$router.push({
							path: '/home',

						});
						this.$refs[param].resetFields();
					} else {
						throw new Error(data.error);

					}
					this.login_loading = false;
				})
				.catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});

					this.login_loading = false;
				});
		},


		/**
     * 跳到立即登录
     * @return {undefined} {description}
     */
		goLogin() {
			this.$emit('loginShow');
		},

	},
};
</script>
